{% extends 'preheat/base.html' %}

{% block title %}添加自动任务 - CDN预热平台{% endblock %}

{% block page_title %}添加自动任务{% endblock %}

{% block content %}
<div class="card">
    <div class="card-header">
        <h3 class="mb-0">自动任务配置</h3>
    </div>
    <div class="card-body">
        <form method="post">
            {% csrf_token %}
            {% if form.errors %}
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <div class="d-flex align-items-center">
                    <i class="fas fa-exclamation-circle mr-2"></i>
                    <div>
                        <strong>表单验证错误：</strong>
                        <ul class="mb-0 mt-1">
                            {% for field in form %}
                                {% for error in field.errors %}
                                    <li>{{ field.label }}: {{ error }}</li>
                                {% endfor %}
                            {% endfor %}
                        </ul>
                    </div>
                </div>
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            {% endif %}
            
            <div class="row">
                <!-- 任务名称 -->
                <div class="col-md-6">
                    <div class="form-group mb-4">
                        <label for="{{ form.name.id_for_label }}" class="form-label font-weight-bold">
                            <i class="fas fa-tasks mr-1"></i>任务名称
                        </label>
                        {{ form.name }}
                        <small class="form-text text-muted">请输入易于识别的任务名称</small>
                    </div>
                </div>
                
                <!-- 任务类型和执行间隔 -->
                <div class="col-md-6">
                    <div class="form-group mb-4">
                        <div class="d-flex align-items-center">
                            <label class="form-label font-weight-bold mb-0 mr-2">
                                <i class="fas fa-clock mr-1"></i>执行周期：
                            </label>
                            <div class="input-group flex-grow-1">
                                <input type="number" name="interval" required="" id="id_interval" class="form-control" placeholder="间隔">
                                <div class="input-group-append">
                                    <select name="task_type" required="" id="id_task_type" class="form-control">
                                        <option value="">---------</option>
                                        <option value="minute" selected="">分钟</option>
                                        <option value="hour">小时</option>
                                        <option value="day">天</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <small class="form-text text-muted mt-1">设置任务执行的频率和时间间隔</small>
                    </div>
                </div>
            </div>
            
            <!-- 任务描述 -->
            <div class="row">
                <div class="col-md-12">
                    <div class="form-group mb-4">
                        <label for="{{ form.description.id_for_label }}" class="form-label font-weight-bold">
                            <i class="fas fa-file-alt mr-1"></i>任务描述
                        </label>
                        <input type="text" name="description" class="form-control" id="id_description" placeholder="请输入任务描述">
                        <small class="form-text text-muted">简要描述该任务的功能和目的</small>
                    </div>
                </div>
            </div>
            
            <div class="row">
                <!-- 按CDN域名筛选 -->
                <div class="col-md-6">
                    <div class="form-group mb-4">
                        <label for="{{ form.cdn_domain_filter.id_for_label }}" class="form-label font-weight-bold">
                            <i class="fas fa-filter mr-1"></i>按CDN域名筛选
                        </label>
                        <select id="{{ form.cdn_domain_filter.id_for_label }}" name="{{ form.cdn_domain_filter.name }}" class="form-control">
                            <option value="">全部域名</option>
                            {% for domain, count in domains_with_count %}
                            <option value="{{ domain.id }}" {% if selected_domain and selected_domain.id == domain.id %}selected{% endif %}>
                                {{ domain.domain }} ({{ domain.get_vendor_display }}) - {{ count }}个地址
                            </option>
                            {% endfor %}
                        </select>
                        <small class="form-text text-muted">选择要预热的CDN域名</small>
                    </div>
                </div>
                

            </div>
            
            <!-- 请求地址选择区域 -->
            <div class="form-group mb-4">
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <label class="form-label font-weight-bold mb-0">
                        <i class="fas fa-link mr-1"></i>请求地址列表
                    </label>
                    {% if domains_with_count %}
                    <div class="btn-group btn-group-sm">
                        <button type="button" id="selectAllUrls" class="btn btn-outline-primary">
                            <i class="fas fa-check-square mr-1"></i>全选
                        </button>
                        <button type="button" id="deselectAllUrls" class="btn btn-outline-secondary">
                            <i class="fas fa-square mr-1"></i>取消全选
                        </button>
                    </div>
                    {% endif %}
                </div>
                {% if selected_domain %}
                <div class="mb-2 alert alert-info py-1 px-3">
                    <i class="fas fa-info-circle mr-1"></i>
                    当前筛选：{{ selected_domain.domain }} ({{ selected_domain.get_vendor_display }}) - 共{{ domain_request_count }}个地址
                </div>
                {% endif %}
                <div class="border rounded p-3 bg-light" style="min-height: 150px; max-height: 250px; overflow-y: auto;">
                    {{ form.request_urls }}
                </div>
            </div>
            
            <!-- 执行服务器 -->
            <div class="form-group mb-4">
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <label class="form-label font-weight-bold mb-0">
                        <i class="fas fa-server mr-1"></i>执行服务器
                    </label>
                    <div class="btn-group btn-group-sm">
                        <button type="button" id="selectAllServers" class="btn btn-outline-primary">
                            <i class="fas fa-check-square mr-1"></i>全选
                        </button>
                        <button type="button" id="deselectAllServers" class="btn btn-outline-secondary">
                            <i class="fas fa-square mr-1"></i>取消全选
                        </button>
                    </div>
                </div>
                <div class="border rounded p-3 bg-light" style="min-height: 100px; max-height: 200px; overflow-y: auto;">
                    {{ form.servers }}
                </div>
            </div>
            
            <!-- 任务状态 -->
            <div class="form-group mb-4">
                <label class="form-label font-weight-bold">
                    <i class="fas fa-power-off mr-1"></i>任务状态
                </label>
                <div class="mt-2">
                    <div class="custom-control custom-checkbox">
                        <input type="checkbox" name="is_active" id="id_is_active" class="custom-control-input" checked>
                        <label class="custom-control-label" for="id_is_active">
                            启用任务
                        </label>
                    </div>
                </div>
                <small class="form-text text-muted">开启后，系统将按照设定周期自动执行任务</small>
            </div>
            
            <!-- 提交按钮 -->
            <div class="d-flex gap-2 mt-4 pt-3 border-top">
                <a href="{% url 'preheat:auto_task_list' %}" class="btn btn-outline-secondary">
                    <i class="fas fa-arrow-left mr-2"></i>返回列表
                </a>
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-save mr-2"></i>保存任务
                </button>
            </div>
        </form>
    </div>
</div>

<script>
$(document).ready(function() {
    // 当CDN域名筛选器改变时，提交表单进行筛选
    $('#{{ form.cdn_domain_filter.id_for_label }}').change(function() {
        const cdnDomainId = $(this).val();
        // 构建新的URL，保留当前表单的其他参数
        const url = new URL(window.location.href);
        if (cdnDomainId) {
            url.searchParams.set('cdn_domain', cdnDomainId);
        } else {
            url.searchParams.delete('cdn_domain');
        }
        // 重新加载页面以应用筛选
        window.location.href = url.toString();
    });
    
    // 全选请求地址
    $('#selectAllUrls').click(function() {
        $('input[name="{{ form.request_urls.name }}"]').prop('checked', true);
    });
    
    // 取消全选请求地址
    $('#deselectAllUrls').click(function() {
        $('input[name="{{ form.request_urls.name }}"]').prop('checked', false);
    });
    
    // 全选服务器
    $('#selectAllServers').click(function() {
        $('input[name="{{ form.servers.name }}"]').prop('checked', true);
    });
    
    // 取消全选服务器
    $('#deselectAllServers').click(function() {
        $('input[name="{{ form.servers.name }}"]').prop('checked', false);
    });
    
    // 确保启用任务复选框正常工作
    $('#id_is_active').on('change', function() {
        console.log('复选框状态改变:', $(this).prop('checked'));
    });
    
    // 确保启用任务标签点击也能触发复选框状态变化
    $('.custom-control-label[for="id_is_active"]').on('click', function(e) {
        e.preventDefault();
        var checkbox = $('#id_is_active');
        var newCheckedState = !checkbox.prop('checked');
        checkbox.prop('checked', newCheckedState);
        console.log('通过标签点击改变复选框状态:', newCheckedState);
        checkbox.trigger('change');
    });
});
</script>

<style>
    /* 表单组样式 */
    .form-group {
        margin-bottom: 1.5rem;
    }
    
    /* 表单控件样式 */
    .form-control {
        border-radius: 0.375rem;
        border: 1px solid #ced4da;
        padding: 0.5rem 0.75rem;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }
    
    .form-control:focus {
        border-color: #80bdff;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }
    
    /* 文本区域样式 */
    textarea {
        resize: vertical;
        min-height: 60px;
        max-height: 120px;
    }
    
    /* 输入框样式 */
    input[type="text"] {
        height: 38px;
    }
    
    /* 标签样式 */
    .form-label {
        font-weight: 600;
        color: #2c3e50;
        margin-bottom: 0.5rem;
    }
    
    /* 卡片样式 */
    .card {
        border: 1px solid rgba(0,0,0,.125);
        border-radius: 0.5rem;
        box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,.075);
    }
    
    .card-header {
        background-color: #f8f9fa;
        border-bottom: 1px solid rgba(0,0,0,.125);
        font-weight: 600;
    }
    
    /* 按钮样式优化 */
    .btn-sm {
        font-size: 0.875rem;
        padding: 0.25rem 0.5rem;
        border-radius: 0.2rem;
    }
    
    /* 自定义开关样式 */
    .custom-control {
        padding-left: 1.75rem;
        margin-bottom: 0;
    }
    
    .custom-control-input:checked ~ .custom-control-label::before {
        background-color: #007bff;
        border-color: #007bff;
    }
    
    /* 自定义复选框样式 */
    .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
        background-color: #28a745;
        border-color: #28a745;
    }
    
    .custom-checkbox .custom-control-label::before {
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 0.25rem;
        border: 1px solid #ced4da;
        background-color: #fff;
        transition: all 0.3s ease-in-out;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .custom-checkbox .custom-control-label::after {
        width: 1.5rem;
        height: 1.5rem;
        top: 0;
        left: -1.55rem;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3e%3cpath fill='%23ffffff' d='M9.846 2.338a.5.5 0 0 1 0 .708L4.707 8.185a.5.5 0 0 1-.708 0L2.154 6.34a.5.5 0 1 1 .708-.708l1.54 1.54 4.646-4.646a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 1rem 1rem;
        transition: all 0.3s ease-in-out;
        transform: translateY(0.25rem);
    }
    
    .custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3e%3cpath fill='%23ffffff' d='M9.846 2.338a.5.5 0 0 1 0 .708L4.707 8.185a.5.5 0 0 1-.708 0L2.154 6.34a.5.5 0 1 1 .708-.708l1.54 1.54 4.646-4.646a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
        transform: translateY(0.25rem);
        opacity: 1;
        top: 0;
        background-size: 1rem 1rem;
    }
    
    .custom-checkbox .custom-control-input:focus ~ .custom-control-label::before {
        box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
        border-color: #28a745;
    }
    
    .custom-checkbox .custom-control-input:not(:checked) ~ .custom-control-label::after {
        opacity: 0;
    }
    
    .custom-checkbox .custom-control-label {
        padding-left: 0.5rem;
        cursor: pointer;
        user-select: none;
        font-weight: 500;
        color: #495057;
        line-height: 1.5rem;
        vertical-align: middle;
        position: relative;
    }
    
    .custom-checkbox:hover .custom-control-label::before {
        border-color: #28a745;
        box-shadow: 0 2px 4px rgba(40, 167, 69, 0.15);
    }
    
    .custom-checkbox .custom-control-input:disabled ~ .custom-control-label::before {
        background-color: #e9ecef;
        border-color: #ced4da;
    }
    
    .custom-checkbox .custom-control-input:disabled ~ .custom-control-label {
        color: #6c757d;
        cursor: not-allowed;
    }
    
    /* 输入组样式 */
    .input-group > .form-control {
        border-right: none;
    }
    
    .input-group-append > .form-control {
        border-left: none;
    }
    
    /* 执行周期字段样式 - 确保在一行显示 */
    .d-flex.align-items-center {
        flex-wrap: nowrap;
    }
    
    .d-flex.align-items-center .input-group {
        min-width: 0;
    }
    
    .d-flex.align-items-center .form-control {
        width: auto;
        flex: 0 1 auto;
    }
    
    .d-flex.align-items-center .input-group-append .form-control {
        width: auto;
        min-width: 80px;
    }
    
    /* 增加执行周期标签宽度 */
    .d-flex.align-items-center .form-label {
        min-width: 100px;
        white-space: nowrap;
    }
    
    /* 复选框列表样式 */
    .border.rounded {
        border-color: #ced4da !important;
    }
    
    .border.rounded div > div {
        padding: 0.25rem 0;
    }
    
    .border.rounded input[type="checkbox"] {
        margin-right: 0.5rem;
    }
    
    /* 帮助文本样式 */
    .form-text {
        font-size: 0.875rem;
        color: #6c757d;
    }
    
    /* 响应式调整 */
    @media (max-width: 768px) {
        .d-flex.justify-content-between {
            flex-direction: column;
        }
        
        .d-flex.justify-content-between > div {
            margin-top: 0.5rem;
        }
    }
</style>
{% endblock %}